Skip to content

feat: 홈 페이지에서 유저 정보를 가져와 카드 내용을 구성하도록 구현#34

Merged
GamjaIsMine02 merged 3 commits into
devfrom
feature/home-page
Jan 15, 2026
Merged

feat: 홈 페이지에서 유저 정보를 가져와 카드 내용을 구성하도록 구현#34
GamjaIsMine02 merged 3 commits into
devfrom
feature/home-page

Conversation

@GamjaIsMine02
Copy link
Copy Markdown
Contributor

@GamjaIsMine02 GamjaIsMine02 commented Jan 15, 2026

1) 작업한 이슈번호

#31

2) 변경 요약 (What & Why)

  • 무엇을 변경했는지: 유저 정보를 하드코딩된 데이터가 아닌 백엔드 데이터를 가져와서 카드를 구성하도록 구현
  • 변경했는지(문제/목표): 목데이터 제거

3) 스크린샷/동영상 (UI 변경 시)

전/후 비교, 반응형(모바일/데스크톱) 캡쳐

  • Before:
  • After:
image

4) 상세 변경사항

  • 라우팅/페이지: app/(with-sidebar)/(home)/page.tsx
  • 컴포넌트: components/home/ProfileSection.tsx
  • 상태관리:
  • API 호출:
  • 스타일:
  • 기타: lib/home/profileService.ts

5) 참고사항

  • 할 일 카드와 예정된 일 카드는 논의 후 기능을 결정할 예정
  • 날짜 관련 기능 추가 예정

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 사용자 프로필을 서버에서 불러와 닉네임, 이메일, 스트릭 일수, TIL 개수를 동적으로 표시합니다.
    • 회원가입 시 프로필 초기값(스트릭 일수 0, TIL 개수 0)을 생성합니다.
  • 개선 사항

    • 할 일 목록 정렬을 최신순에서 오래된 순(오름차순)으로 변경했습니다.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jan 15, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

인증 상태 변화에 따라 Firestore에서 사용자의 프로필을 로드하고 todos를 함께 초기화/정리하도록 홈 페이지 데이터 흐름을 통합했으며, ProfileSection에 profile prop을 전달하도록 컴포넌트를 변경했습니다. todo 정렬을 생성 시각 오름차순으로 변경하고, 회원가입에 streakDays/tilCount 초기값을 추가했습니다.

Changes

Cohort / File(s) 변경 요약
홈 페이지 데이터 흐름
app/(with-sidebar)/(home)/page.tsx
인증(onAuthStateChanged) 기반으로 profile 상태 추가, getProfile 호출 통합, currentUser 변화 시 profile과 todos를 동시에 로드/초기화, ProfileSection에 profile prop 전달
프로필 서비스
lib/home/profileService.ts
Profile 인터페이스 추가 및 `getProfile(uid: string): Promise<Profile
컴포넌트 변경
components/home/ProfileSection.tsx
ProfileSectionProps에 `profile: Profile
투두 서비스
lib/home/todoService.ts
fetchTodos의 Firestore 정렬을 createAt 내림차순 → 오름차순으로 변경
회원가입 API
api/signup.api.ts
SignupPayloadstreakDays, tilCount 필드 추가 및 신규 사용자 문서 생성 시 두 필드를 0으로 초기화하여 저장

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Home as Home Page (page.tsx)
    participant Auth as Auth Listener
    participant ProfileSvc as Profile Service
    participant TodoSvc as Todo Service
    participant Firestore as Firestore
    participant ProfileComp as ProfileSection

    User->>Home: 페이지 접근
    Home->>Auth: onAuthStateChanged 등록
    Auth-->>Home: currentUser 변경 알림
    Home->>ProfileSvc: getProfile(currentUser.uid)
    ProfileSvc->>Firestore: users/{uid} 문서 조회
    Firestore-->>ProfileSvc: 프로필 데이터 또는 null
    ProfileSvc-->>Home: Profile 반환
    Home->>TodoSvc: fetchTodos(currentUser.uid)
    TodoSvc->>Firestore: todos 쿼리 (createAt ASC)
    Firestore-->>TodoSvc: todo 목록 반환
    TodoSvc-->>Home: todos 반환
    Home->>ProfileComp: profile prop 및 todos 전달
    ProfileComp->>User: 프로필 및 통계 렌더링
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 분

Possibly related PRs

Poem

🐇 나는 토끼, 코드밭을 훌쩍 뛰네
프로필 한 줌 캐고, 투두 줄 맞추네
스트릭과 TIL 숫자도 세어주고
화면에 반짝 통계들 피어나니
당근 한 입, 작은 변화 축하해요 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 주요 변경사항인 홈 페이지에서 하드코딩된 유저 정보를 백엔드 데이터로 변경하는 내용을 명확하게 설명하고 있습니다.
Description check ✅ Passed PR 설명이 제목 규칙, 이슈번호, 변경 요약, UI 스크린샷, 상세 변경사항, 참고사항 등 템플릿의 주요 항목들을 모두 포함하고 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings


📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dedbb05 and 2038c59.

📒 Files selected for processing (1)
  • app/(with-sidebar)/(home)/page.tsx

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@app/`(with-sidebar)/(home)/page.tsx:
- Around line 83-97: The loadData function inside the useEffect needs to handle
errors from getProfile to avoid unhandled promise rejections: wrap the
getProfile call (and subsequent setProfile / loadTodos sequence) in a try/catch
inside loadData, on error log or surface the error (e.g., via console.error or
processLogger) and setProfile(null) and setTodos([]) as a safe fallback; keep
the existing loadTodos error handling unchanged and ensure loadData still
returns/awaits properly.

In `@lib/home/profileService.ts`:
- Around line 5-11: The Profile interface declares required fields streakDays,
tilCount, and dailyGoal but signup creates only nickname, email, createdAt, so
new users will get undefined for those fields; update the Profile interface
(Profile) to make streakDays, tilCount, and dailyGoal optional OR modify
getProfile to supply defaults when reading from Firestore (e.g., in getProfile
use fallback values for profile.streakDays, profile.tilCount,
profile.dailyGoal), and ensure api/signup.api.ts creates documents with either
those default fields or rely on getProfile’s defaults for consistency.
🧹 Nitpick comments (3)
lib/home/profileService.ts (1)

23-23: 미완성 코드: 프로필 업데이트 함수 누락

프로필 업데이트 기능에 대한 주석만 있고 구현이 없습니다. 추후 구현 예정이라면 TODO 주석으로 명시하거나, 불필요하다면 제거하는 것이 좋습니다.

이 기능 구현이 필요하시면 도움을 드릴 수 있습니다. 이슈를 생성해 드릴까요?

components/home/ProfileSection.tsx (2)

19-27: profile이 null일 때 빈 값 렌더링 처리 필요

profilenull인 경우 (로딩 중 또는 fetch 실패 시) 닉네임, 이메일 등이 빈 값으로 표시됩니다. 로딩 상태나 기본값을 표시하는 것이 사용자 경험 개선에 도움이 됩니다.

♻️ 기본값 또는 플레이스홀더 적용 예시
 <h3 className="text-xl font-bold text-gray-900">
-  {profile?.nickname}
+  {profile?.nickname ?? '로딩 중...'}
 </h3>
-<p className="text-sm text-gray-500">{profile?.email}</p>
+<p className="text-sm text-gray-500">{profile?.email ?? '-'}</p>
 <div className="mt-1 flex gap-2 text-xs font-medium">
-  <span className="text-primary">{profile?.streakDays}일 </span>연속
+  <span className="text-primary">{profile?.streakDays ?? 0}일 </span>연속
   <span className="text-gray-400">|</span>
-  <span className="text-primary">{profile?.tilCount}개 </span>TIL
+  <span className="text-primary">{profile?.tilCount ?? 0}개 </span>TIL
 </div>

32-39: 하드코딩된 목표 달성률 값 발견

PR 목적이 하드코딩된 목데이터를 제거하는 것인데, "3/5" 목표 달성률이 여전히 하드코딩되어 있습니다. PR 설명에 따르면 이 부분은 추후 구현 예정으로 보이지만, 명확히 하기 위해 TODO 주석을 추가하거나 profile?.dailyGoal을 활용하는 것을 권장합니다.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6ff687a and bdc7ed5.

📒 Files selected for processing (4)
  • app/(with-sidebar)/(home)/page.tsx
  • components/home/ProfileSection.tsx
  • lib/home/profileService.ts
  • lib/home/todoService.ts
🧰 Additional context used
🧬 Code graph analysis (3)
lib/home/profileService.ts (2)
lib/firebase.ts (1)
  • db (26-26)
api/signup.api.ts (1)
  • signupWithEmail (11-20)
components/home/ProfileSection.tsx (1)
lib/home/profileService.ts (1)
  • Profile (5-11)
app/(with-sidebar)/(home)/page.tsx (3)
lib/home/profileService.ts (2)
  • Profile (5-11)
  • getProfile (14-21)
lib/home/todoService.ts (1)
  • Todo (14-19)
lib/firebase.ts (1)
  • auth (25-25)
🔇 Additional comments (3)
lib/home/todoService.ts (1)

24-24: LGTM!

할 일 목록 정렬 순서가 생성 시간 기준 오름차순(오래된 항목 먼저)으로 변경되었습니다. 의도된 변경으로 보입니다.

app/(with-sidebar)/(home)/page.tsx (2)

74-81: LGTM!

인증 상태 감지 로직이 데이터 로딩 로직과 깔끔하게 분리되어 있습니다. onAuthStateChanged 구독 해제도 클린업 함수에서 적절히 처리하고 있습니다.


115-118: LGTM!

ProfileSectionprofile prop이 올바르게 전달되고 있습니다.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Comment on lines +83 to +97
// 사용자가 존재하면 데이터 불러옴
useEffect(() => {
if (currentUser) {
const loadData = async () => {
const userProfile = await getProfile(currentUser.uid);
setProfile(userProfile);

await loadTodos(currentUser.uid);
};
loadData();
} else {
setTodos([]);
setProfile(null);
}
}, [currentUser]);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

getProfile 호출 시 에러 처리 누락

loadTodos 함수는 내부적으로 try/catch로 에러를 처리하지만, getProfile 호출은 에러 처리가 없습니다. Firestore 요청 실패 시 unhandled promise rejection이 발생할 수 있습니다.

🛠️ 에러 처리 추가 제안
   useEffect(() => {
     if (currentUser) {
       const loadData = async () => {
-        const userProfile = await getProfile(currentUser.uid);
-        setProfile(userProfile);
-
-        await loadTodos(currentUser.uid);
+        try {
+          const userProfile = await getProfile(currentUser.uid);
+          setProfile(userProfile);
+          await loadTodos(currentUser.uid);
+        } catch (err) {
+          console.error(err);
+          setError('프로필 정보를 불러오는 데 실패하였습니다');
+        }
       };
       loadData();
     } else {
       setTodos([]);
       setProfile(null);
     }
   }, [currentUser]);
🤖 Prompt for AI Agents
In `@app/`(with-sidebar)/(home)/page.tsx around lines 83 - 97, The loadData
function inside the useEffect needs to handle errors from getProfile to avoid
unhandled promise rejections: wrap the getProfile call (and subsequent
setProfile / loadTodos sequence) in a try/catch inside loadData, on error log or
surface the error (e.g., via console.error or processLogger) and
setProfile(null) and setTodos([]) as a safe fallback; keep the existing
loadTodos error handling unchanged and ensure loadData still returns/awaits
properly.

Comment thread lib/home/profileService.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant